<template>
    <div class="" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px">
        <div class="navbar-wrap">
            <div class="new-nav-page list-scroll-white " style="width: 100%;">
                <headerCon></headerCon>
            </div>
        </div>
    </div>
    <div class="model-list-content">
        <div class="category-of-the-entire-station">
            <div class="nav-class-category"> <!-- class="active"-->
                <a @click="navClick(item)" v-for="(item,index) in navMenu" :class="item.id === navConfig.click_menu.id ? 'active' : ''" :key="index">{{item['title']}}</a>
            </div>
        </div>
        <div class="list-content">
            <!-- 筛选区 -->
            <div class="spacing-content">
                <div class="news-class-layout new-version-classification">
                    <!-- 分类筛选 -->
                    <div class="model-classification " style="">
                        <!--    分类筛选开始               -->
                        <div class="sort-filter-one-class clearfix expand" style="display: block; max-height: 60px;">
                            <span>大类:</span>
                            <ul class="clearfix list-class-click">
                                <li>
                                    <a :class="navConfig.twoMenu.length == 0 ? 'active' : ''">
                                        全部</a>
                                </li>
                                <li v-for="(child,c_index) in checkMenu.children" :key="c_index">
                                    <a @click="bigTypeClick(child)" :class="navConfig.twoMenu.id == child.id ? 'active' : ''">
                                        {{ child['title'] }}</a>
                                    <a class="close-a-icon sort-filter-item" rel="nofollow" style="display: block;"
                                        href="#" data-class_id="455" data-grade="1" data-res_type="sketchup"></a>
                                </li>
                            </ul>
                            <i class="sort-more-develop" data-type="0" style="display: inline-block;">
                                <el-icon class="icon icon-nav-more">
                                    <ArrowDown />
                                </el-icon>
                            </i>
                        </div>
                        <div class="sort-filter-one-class clearfix" style="display: block">
                            <span>细分:</span>
                            <ul class="clearfix list-class-click">
                                <li>
                                    <a :class="threeMenu.length == 0 ? 'active' : ''">
                                        全部 </a>
                                </li>
                                <li v-for="(child_v,c_v_index) in threeMenuList" :key="c_v_index">
                                    <a :class="navConfig.threeMenu.id == child_v['id'] ? 'active' : ''">{{ child_v['title'] }}</a>
                                    <a class="close-a-icon sort-filter-item" rel="nofollow" style="display: block;"></a>
                                </li>
                            </ul>
                            <i class="sort-more-develop" data-type="0" style="display: none;">
                                <svg class="icon icon-nav-more" aria-hidden="true">
                                    <use xlink:href="#icon-direction_single_arrow_up_s"></use>
                                </svg>
                            </i>
                        </div>
                        <!--     分类筛选结束-->
                    </div>
                    <div class="small-screen-show clearfix" style="display: flex;">
                        <h1 class="search-word"></h1>
                        <div class="item-small-screen clearfix">
                            <div class="item-select">
                                <span>
                                    渲染器  <el-icon class="icon">
                                    <ArrowDown />
                                </el-icon>
                                </span>
                                <div class="href-hover-select">
                                    <div class="sort-list">
                                        <a rel="nofollow" ll-buriedpoint="3-0" sc-point="1"
                                            ll-buriedpoint-type="click_res_list_filter" class="active ll_point_jsfun"
                                            href="#">全部</a>
                                        <a rel="nofollow" ll-buriedpoint="3-1" sc-point="1"
                                            ll-buriedpoint-type="click_res_list_filter" class="ll_point_jsfun"
                                            href="#">VR</a>
                                        <a rel="nofollow" ll-buriedpoint="3-2" sc-point="1"
                                            ll-buriedpoint-type="click_res_list_filter" class="ll_point_jsfun"
                                            href="#">CR</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 推荐类型 展览、或搜索词相关的时候不显示 -->
                        <div class="item-small-screen clearfix">
                            <div class="item-select">
                                <span>
                                    <span class="js-recommend-title">推荐类型</span>
                                    <el-icon class="icon">
                                    <ArrowDown />
                                </el-icon>
                                </span>
                                <div class="href-hover-select">
                                    <div class="sort-list">
                                        <a rel="nofollow" ll-buriedpoint="4-0" sc-point="2"
                                            ll-buriedpoint-type="click_res_list_filter" class="active ll_point_jsfun"
                                            href="#">全部</a>
                                        <a rel="nofollow" ll-buriedpoint="4-1" sc-point="2"
                                            ll-buriedpoint-type="click_res_list_filter" class="ll_point_jsfun"
                                            href="#">精品</a>
                                        <a rel="nofollow" ll-buriedpoint="4-2" sc-point="2"
                                            ll-buriedpoint-type="click_res_list_filter" class="ll_point_jsfun"
                                            href="#">品牌</a>
                                        <a rel="nofollow" ll-buriedpoint="0-2" sc-point="2"
                                            ll-buriedpoint-type="click_res_list_filter" class="ll_point_jsfun"
                                            href="#">VIP</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 风格 展览的时候不显示 -->
                        <!-- 风格筛选 -->
                        <div class="item-screen clearfix">
                            <div class="item-select">
                                <span>
                                    全部风格 <el-icon class="icon">
                                    <ArrowDown />
                                </el-icon>
                                </span>
                                <div class="href-hover-select style-hover-select">
                                    <div class="sort-list">
                                        <a sc-point="3" rel="nofollow" href="#" class="sort-item active">全部</a>
                                        <a sc-point="3" rel="nofollow" href="#" class="sort-item ">现代</a>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 展览分类 -->
                        <!-- 文件大小 -->
                        <div class="item-small-screen clearfix">
                            <div class="item-select">
                                <span>
                                    压缩包大小 <el-icon class="icon">
                                    <ArrowDown />
                                </el-icon>
                                </span>
                                <div class="href-hover-select size-hover-select">
                                    <div class="sort-list">
                                        <!-- sc-point="15" buried-text="埋点内容去掉M单位" 用于埋点-->
                                        <a rel="nofollow" sc-point="15" ll-buriedpoint-type="click_res_list_filter"
                                            href="#" class="ll_point_jsfun active" buried-text="">全部大小</a>
                                        <a rel="nofollow" sc-point="15" ll-buriedpoint-type="click_res_list_filter"
                                            href="#" class="ll_point_jsfun" buried-text="0-1">≤1M</a>x
                                        <div class="sort-item-clean">
                                            <span class="tip">自定义筛选项</span>
                                            <span class="sort-size-empty" style="display: none;">清除</span>
                                        </div>
                                        <div class="size-input-custom">
                                            <input type="text" class="screen-size-num1" value="">
                                            <span>-</span>
                                            <input type="text" class="screen-size-num2" value="">
                                            <span>M</span>
                                        </div>
                                        <div class="sort-item-size-btn clearfix">
                                            <span class="sort-for-search">筛选</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a rel="nofollow" href="#" class="right-delete">
                            <el-icon class="icon">
                                <RefreshLeft />
                            </el-icon>
                            <span>重置筛选</span>
                        </a>
                    </div>


                </div>
            </div>
            <!-- 内容区 -->
            <div class="list-type-content tentative-superposition-mask">
                <ul id="waterfall" class="waterfall experiment-view-waterfall">
                    <el-space wrap :size="17">
                        <li class="image-boxs" v-for="i in 30">
                            <!-- <div class="list-model-collect">
                            <span data-id="20297859">默认收藏夹</span>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-direction_single_arrow_up_s"></use>
                            </svg>
                        </div> -->
                            <div class="model-contrast">
                                <div class="ll_point_jsfun js_favorite_popup" data-id="ACI061619719052531">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-ListPage_icon_default_Collection"></use>
                                    </svg>
                                    <span class="balloon-tips">收藏</span>
                                </div>
                                <a rel="nofollow" ll-buriedpoint="3" ll-buriedpoint-type="click_res_list_res"
                                    class="ll_point_jsfun" target="_blank" href="">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-a-ListPage_icon_default_Imagesearch"></use>
                                    </svg>
                                    <span class="balloon-tips">搜图</span>
                                </a>

                            </div>
                            <a href="" class="model-buried-point" target="_blank">
                                <div class="cover-images" style="height:208px">
                                    <img src="https://respic.3d66.com/coverimg/cache/b05d/84742d64909f3497724f8572a85a0ffe.jpg!zzz-waterfall-w-1?v=13735108&amp;k=D41D8CD98F00B204E9800998ECF8427E"
                                        class="load_img" alt="现代沙发茶几组合 转角沙发 茶几 单人休闲沙发 金属落地灯 绿植 摆件3D模型"
                                        title="现代沙发茶几组合 转角沙发 茶几 单人休闲沙发 金属落地灯 绿植 摆件3D模型">

                                </div>
                                <div class="model-goods-info clearfix">
                                    <p class="model-goods-name">

                                        现代沙发茶几组合 转角沙发 茶几 单人休闲沙发 金属落地灯 绿植 摆件3D模型
                                    </p>
                                </div>
                            </a>

                        </li>
                    </el-space>
                </ul>
            </div>
        </div>
        <!-- 吸顶 -->
        <div class="nav-list-ceiling top-sorption-ceiling" style="display: block;">
            <flexHeader></flexHeader>
        </div>
    </div>
    <login></login>
    <footerContent></footerContent>
</template>
<script setup lang="ts">
import headerCon from "../../components/header.vue";
import login from "../../components/login.vue";
import flexHeader from "../../components/flex_header.vue";
import footerContent from "../../components/footerContent.vue";
import { useNavConfig } from '../../stores/navConfig'
import { ref } from "vue";
const navConfig = useNavConfig()
const navMenu:any = navConfig.all
const checkMenu:any = navConfig.click_menu //一级
const twoMenu:any = navConfig.twoMenu //二级
const threeMenu:any = navConfig.threeMenu //三级
const threeMenuList = ref([])
if(navConfig.clickGrade == 2){
    threeMenuList.value = checkMenu.children[navConfig.indexActive]['children'];
}else{
    threeMenuList.value = twoMenu.children;
}


const bigTypeClick = (child:any) =>{
    console.log(1)
    threeMenuList.value = child.children
    console.log(navConfig.twoMenu)
    navConfig.setTwoNav(child)
    console.log(navConfig.twoMenu)
}


//主类型切换
const navClick = (item:any) =>{
    navConfig.dataFill(item);
    console.log(twoMenu)
}

</script>

<style scoped></style>